<template>
  <view class="container">
    <!-- 分组按钮 -->
    <view class="group-btns">
      <view class="group-btn">
        <view class="icon heart" />
        <text>赞和收藏</text>
      </view>
      <view class="group-btn">
        <view class="icon follow" />
        <text>新增关注</text>
      </view>
      <view class="group-btn">
        <view class="icon comment" />
        <text>评论和@</text>
      </view>
    </view>

    <!-- 消息列表 -->
    <view class="msg-list">
      <view v-for="(item, idx) in msgList" :key="idx" class="msg-item" :class="{ unread: item.unread }" @click="goToChat(item)">
        <image v-if="item.avatar" :src="item.avatar" class="avatar" />
        <view v-else class="avatar-group">
          <image v-for="(av, i) in item.avatars" :key="i" :src="av" class="avatar-small" />
        </view>
        <view class="msg-content">
          <view class="msg-title">{{ item.title }}<text v-if="item.icon" class="msg-icon">{{ item.icon }}</text></view>
          <view class="msg-desc">{{ item.desc }}</view>
        </view>
        <view class="msg-right">
          <text class="msg-time">{{ item.time }}</text>
          <view v-if="item.unread" class="msg-dot">{{ item.unreadNum || '' }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "MessagePage",
  data() {
    return {
      msgList: [
        {
          avatars: [
            'https://img1.imgtp.com/2023/06/01/1.jpg',
            'https://img1.imgtp.com/2023/06/01/2.jpg',
            'https://img1.imgtp.com/2023/06/01/3.jpg',
            'https://img1.imgtp.com/2023/06/01/4.jpg',
          ],
          title: '前端复习搭子群',
          desc: '爆炸糖：996每天9点下班的话，到家…',
          time: '刚刚',
          unread: true,
          unreadNum: 1
        },
        {
          avatars: [
            'https://img1.imgtp.com/2023/06/01/5.jpg',
            'https://img1.imgtp.com/2023/06/01/6.jpg',
            'https://img1.imgtp.com/2023/06/01/7.jpg',
            'https://img1.imgtp.com/2023/06/01/8.jpg',
          ],
          title: '前端开发面试交流',
          desc: '"WWWT"加入了群聊',
          time: '20:27',
          unread: false
        },
        {
          avatar: 'https://img1.imgtp.com/2023/06/01/9.png',
          title: '活动消息',
          desc: '创作者周报送达 06.09-06.15',
          time: '昨天',
          unread: true
        },
        {
          avatar: 'https://img1.imgtp.com/2023/06/01/10.png',
          title: '爆炸糖',
          desc: '我还是不适合面试这些。',
          time: '星期四',
          unread: false
        },
        {
          avatar: 'https://img1.imgtp.com/2023/06/01/11.png',
          title: '草莓圣代',
          desc: '[图片]',
          icon: '🍓',
          time: '06-09',
          unread: false
        },
        {
          avatar: 'https://img1.imgtp.com/2023/06/01/12.jpg',
          title: '月亮金金子',
          desc: '',
          time: '06-09',
          unread: false
        },
        {
          avatar: 'https://img1.imgtp.com/2023/06/01/13.png',
          title: '系统消息',
          desc: '认证结果通知',
          time: '06-09',
          unread: false
        },
        {
          avatar: 'https://img1.imgtp.com/2023/06/01/14.png',
          title: '客服消息',
          desc: '商业合作官方客服：「系统消息提醒」',
          time: '05-14',
          unread: true
        }
      ]
    }
  },
  methods: {
    goToChat(item) {
      uni.navigateTo({
        url: '/pages/chat/index'
      });
    }
  }
}
</script>

<style lang="less">
.container {
  background: #fff;
  height: 100%;
}
.group-btns {
  display: flex;
  justify-content: space-around;
  margin: 40rpx 0 20rpx 0;
  .group-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
      width: 96rpx;
      height: 96rpx;
      border-radius: 32rpx;
      margin-bottom: 12rpx;
      &.heart { background: #ffeaea; }
      &.follow { background: #eaf3ff; }
      &.comment { background: #eaffea; }
    }
    text {
      font-size: 30rpx;
      color: #333;
    }
  }
}
.msg-list {
  .msg-item {
    display: flex;
    align-items: center;
    padding: 24rpx 32rpx;
    border-bottom: 2rpx solid #f2f2f2;
    position: relative;
    &.unread {
      background: #f9f9f9;
    }
    .avatar {
      width: 96rpx;
      height: 96rpx;
      border-radius: 24rpx;
      margin-right: 24rpx;
    }
    .avatar-group {
      display: flex;
      flex-wrap: wrap;
      width: 96rpx;
      height: 96rpx;
      .avatar-small {
        width: 44rpx;
        height: 44rpx;
        border-radius: 12rpx;
        margin: 2rpx;
      }
    }
    .msg-content {
      flex: 1;
      .msg-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #222;
        display: flex;
        align-items: center;
        .msg-icon {
          margin-left: 8rpx;
        }
      }
      .msg-desc {
        font-size: 28rpx;
        color: #888;
        margin-top: 4rpx;
      }
    }
    .msg-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .msg-time {
        font-size: 24rpx;
        color: #bbb;
      }
      .msg-dot {
        background: #ff3b30;
        color: #fff;
        border-radius: 20rpx;
        font-size: 24rpx;
        min-width: 36rpx;
        height: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8rpx;
        padding: 0 10rpx;
      }
    }
  }
}
</style> 